﻿@model NextInventory.Model.Inventory.CategoryModel

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<script type="text/javascript">

    function CheckCategoryNameExist() {

        $.ajax({
            type: "POST",
            url: "@Url.Action("CategoryNameAvailable", "Inventory")",
            data: '{name: "' + $("#CategoryName").val() + '" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: function () {
                $("#availability").addClass("loading");
            },
            complete: function () {
                $("#availability").removeClass("loading");
            },
            success: OnSuccess,
            failure: function (response) {
                alert(response);
            }
        });
    }

    function OnSuccess(response) {
        var availability = $("#availability")[0];
        switch (response) {
            case "available":
                $("#availability").removeClass("taken");
                $("#availability").removeClass("warning");
                $("#availability").addClass("available");
                break;
            case "taken":
                $("#availability").removeClass("available");
                $("#availability").removeClass("warning");
                $("#availability").addClass("taken");
                break;
            case "error":
                $("#availability").removeClass("warning");
                $("#availability").removeClass("available");
                $("#availability").addClass("taken");
                break;
        }
    }

</script>
<div id="categoryDetails">
    @using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "categoryDetails" }))
    {
        @Html.HiddenFor(model => model.CategoryId)


        <table id="id-form" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td></td>
                <td>
                    @Html.ValidationSummary(true)
                </td>
            </tr>
            <tr>
                <th>
                    @Html.LabelFor(model => model.Name)

                </th>
                <td>
                    @Html.TextBoxFor(model => model.Name, new { @class = "inp-form", @id = "CategoryName", @onChange = "CheckCategoryNameExist()" })
                    @Html.ValidationMessageFor(model => model.Name)
                    <span id="availability"></span>
                </td>
            </tr>
            <tr>
                <th>
                    @Html.LabelFor(model => model.Description)
                </th>
                <td>
                    @Html.TextBoxFor(model => model.Description, new { @class = "inp-form" })
                    @Html.ValidationMessageFor(model => model.Description)
                </td>
            </tr>
            <tr>
                <th></th>
                <td>
                    <input type="submit" value="Save" class="form-submit" />
                    <input type="reset" value="Reset" class="form-reset" />
                </td>
            </tr>
        </table>
    }
</div>
